<template>
  <div :key="propkey" style="width: 100%; height: 100%;">
    <div ref="line" class="line" />
  </div>
</template>

<script>
export default {
  name: 'Chartline',
  props: {
    propkey: {
      type: String,
      default: 'line'
    },
    id: {
      type: String,
      default: ''
    },
    // xdata: {
    //   type: Array,
    //   default: () => {
    //     return []
    //   }
    // },
    legend: {
      type: Array,
      default: () => {
        return []
      }
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // options: {
      //   title: {
      //     text: ''
      //   },
      //   tooltip: {
      //     trigger: 'axis'
      //   },
      //   legend: {
      //     data: []
      //   },
      //   grid: {
      //     left: '3%',
      //     right: '4%',
      //     bottom: '3%',
      //     containLabel: true
      //   },
      //   toolbox: {
      //     feature: {
      //       // saveAsImage: {}
      //     }
      //   },
      //   xAxis: {
      //     type: 'category',
      //     boundaryGap: false,
      //     data: []
      //   },
      //   yAxis: {
      //     type: 'value'
      //   },
      //   series: [
      //     // {
      //     //   name: 'Email',
      //     //   type: 'line',
      //     //   stack: 'Total',
      //     //   data: [120, 132, 101, 134, 90, 230, 210]
      //     // }
      //   ]
      // }
      options: {
        title: {
          text: '收支分析'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
          // data: []
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            axisLabel: {
              show: true
            },
            axisLine: {
              show: true
            },
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            // data: []
          }
        ],
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }
    }
  },
  watch: {
    // xdata: {
    //   immediate: true,
    //   deep: true,
    //   handler(val) {
    //     if (!val.length) {
    //       return
    //     }
    //     // this.$set(this.options, 'xAxis', val)
    //     this.options = Object.assign({}, this.options, { xAxis: val })
    //     // this.options = Object.assign({}, this.options)
    //     console.log(this.options)
    //   }
    // },
    data: {
      immediate: true,
      deep: true,
      handler(val) {
        if (!Object.keys(val).length) {
          return
        }
        this.options = Object.assign({}, this.options, val)
        const id = this.id
        this.$refs.line.setAttribute('id', id)
        const chartDom = document.getElementById(id)
        const myChart = this.$echarts.init(chartDom)
        myChart.setOption(this.options)
      }
    },
    legend: {
      immediate: true,
      deep: true,
      handler(val) {
        this.$set(this.options.legend, 'data', val)
        // console.log(this.options.legend)
      }
    }
  }
}
</script>

<style>
.line {
  width: 100%;
  height: 100%;
}
</style>
